<template>
  <div id="promotion">
    <HeaderBg>
      <Headers :title="$t('promotion.title')"/>
    </HeaderBg>
    <div class="code">
      <p>{{$t('promotion.codeText')}}</p>
      <p class="code-num">{{code}}</p>
    </div>
    <!-- qrcode -->
    <div
      class="qrcode"
      ref="qrcode"
      v-clipboard:copy="code"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError"
    ></div>
    <div class="copy">{{$t('receipt.clickQrcodeText')}}</div>
  </div>
</template>

<script>
import HeaderBg from "components/HeaderBg";
import { qrcode } from "utils/js/qrcode";
export default {
  name: "promotion",
  data() {
    return {
      code: 237184
    };
  },
  components: {
    HeaderBg
  },
  methods: {
    onCopy() {
      alert("copy success");
    },
    onError() {
      console.error(new Error("copy error"));
    }
  },
  mounted() {
    // 调用封装的qrcode插件
    qrcode(this.$refs.qrcode, this.code, 159, 159);
  }
};
</script>

<style lang="stylus" scoped>
@import '../../../utils/styl/mixin.styl'
#promotion
  positCenter(0, 0, 0, 0, 0, 0)
  width 100%
  background-color $bodyBg
  .code
    margin-top rem(210)
    text-align center
    font-size rem(15)
    color $fontColor
    .code-num
      margin rem(4) auto rem(20)
      font-size rem(25)
      color $tabBarActive
      font-weight bold
  .qrcode
    width rem(203)
    height rem(203)
    border-radius rem(20)
    border rem(1) solid $tabBarColor
    margin rem(22) auto 0
    box-sizing border-box
    padding rem(22)
  .copy
    margin-top rem(15)
    color $fontColor
</style>
